<template>
  <div>
    <!-- 商品信息 -->
    <div class="goods-info">
      <div class="info-box">
        <!-- 商品图片 -->
        <div class="goods-pic">
          <img :src="goodsConstants.goodsPictureBaseURL + orderInfo.goodsPicturePath" alt="">
        </div>
        <!-- 商品名 -->
        <div class="goods-name">
          <span>{{orderInfo.goodsName}}</span>
        </div>
        <!-- 商品价格 -->
        <div class="goods-price">
          <span>￥{{orderInfo.goodsPrice}}</span>
        </div>
        <!-- 购买数量 -->
        <div class="goods-number">
          <span>×{{orderInfo.goodsNumber}}</span>
        </div>
      </div>
      <!-- 配送 -->
      <div class="info-box">
        <div class="freight">
          <span>配送服务：</span>
          <span>{{Number(orderInfo.goodsFreight)==0 ? '免运费' : '运费 '+orderInfo.goodsFreight}}</span>
          <!-- <span>免运费</span> -->
        </div>
      </div>
      <!-- 商品参数 -->
      <div class="info-box">
        <div class="goods-param">
          <span>商品参数：</span>
          <span v-for="(param, index) in JSON.parse(orderInfo.goodsParam)" :key="index">
            <span>{{index}}：</span>
            <span>{{param}}；</span>
          </span>
        </div>
      </div>
      <!-- 总金额 -->
      <div class="info-box">
        <div class="pay-money">
          <span>总金额：</span>
          <span>{{orderInfo.payMoney}}</span>
        </div>
      </div>
      <!-- 收货人 -->
      <div class="info-box">
        <div class="receive-name">
          <span>收货人：</span>
          <span>{{orderInfo.receiveName}}</span>
        </div>
      </div>
      <!-- 电话号码 -->
      <div class="info-box">
        <div class="receive-name">
          <span>电话号码：</span>
          <span>{{orderInfo.receiveTelephone}}</span>
        </div>
      </div>
      <!-- 订单创建时间 -->
      <div class="info-box">
        <div class="receive-name">
          <span>订单创建时间：</span>
          <span>{{orderInfo.orderCreateTime.split('T').join(' ')}}</span>
        </div>
      </div>
      <!-- 订单付款时间 -->
      <div class="info-box" v-if="orderInfo.orderStatus">
        <div class="receive-name">
          <span>订单付款时间：</span>
          <span>{{orderInfo.orderPayTime.split('T').join(' ')}}</span>
        </div>
      </div>
      <div class="btn-box" v-if="!orderInfo.orderStatus">
        <van-button 
          type="danger" 
          plain 
          hairline 
          round 
          size="small" 
          class="btn" 
          @click="deleteOrder(orderInfo.orderId, orderInfo.goodsId, orderInfo.goodsNumber)"
        >取消订单</van-button>
        <van-button 
          type="danger" 
          plain 
          hairline 
          round 
          size="small" 
          class="btn" 
          @click="payOrder(orderInfo.orderId, orderInfo.goodsId, orderInfo.goodsNumber)"
        >支付订单</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'

export default {
  name: 'OrderListItem',
  props: ['orderInfo'],
  data() {
    return {
      
    }
  }, 
  methods: {
    deleteOrder(orderId) {
      Dialog.confirm({
        message: '是否确认取消该订单',
      })
      .then(() => {
        // on confirm
        this.req.get(
          'user/delete/order/id/',
          {
            params: {
              orderId
            }
          }
        ).then(res=>{
          if (res.data.mark === 1) {
            this.$toast.success(res.data.message)
            // this.$router.go(0)
            // 触发自定义时间刷新订单数据
            this.$emit('getAllOrder')
          } else {
            this.$toast.fail(res.data.message)
          }
        }, err=>{
          this.$toast.fail(err)
        })
      })
      .catch(() => {
        // on cancel
      });
    },
    payOrder(orderId, goodsId, goodsNumber) {
      Dialog.confirm({
        message: '是否确认支付该订单',
      })
      .then(() => {
        // on confirm
        this.req.get(
          'user/pay/order/id/',
          {
            params: {
              orderId,
              goodsId,
              goodsNumber,
            }
          }
        ).then(res=>{
          if (res.data.mark === 1) {
            this.$toast.success(res.data.message)
            // this.$router.go(0)
            // 触发自定义时间刷新订单数据
            this.$emit('getAllOrder')
          } else {
            this.$toast.fail(res.data.message)
          }
        }, err=>{
          this.$toast.fail(err)
        })
      })
      .catch(() => {
        // on cancel
      });
    }
  },
}
</script>

<style lang="less" scoped>
// 商品信息
.goods-info {
  position: relative;
  margin: 0.5rem 0.5rem 0;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: #fff;
  .info-box {
    position: relative;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
    // 商品图片
    .goods-pic {
      overflow: hidden;
      width: 6rem;
      height: 6rem;
      border-radius: 1rem;
      img {
        width: 100%;
      }
    }
    // 商品名
    .goods-name {
      position: absolute;
      top: 0.5rem;
      left: 7rem;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 限制在一个块元素显示的文本的行数 */
      -webkit-line-clamp: 2;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-box-orient: vertical;
    }
    // 商品价格
    .goods-price {
      position: absolute;
      bottom: 1rem;
      left: 7rem;
      color: #ee0a24;
    }
    // 商品数量
    .goods-number {
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      color: #999;
    }
  }
  .btn-box {
    .btn {
      margin: 0.5rem 1rem 0 0;
    }
  }
}
</style>